<template>
    <div ref="chart6" style="height: 200px;"></div>
</template>

<script setup lang="ts">
import axios from "axios";
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

let option = {
    series: [

    ],
    // grid: {
    //     width: 800
    // },
};


let chart6 = ref<(HTMLDivElement | null)>(null)
let myECharts: echarts.ECharts | null = null


let totalData: any = []
let name = ref<string>('')
let colorData = ['#0EAB2F', '#E8B31E', '#E65644', '#A66CE5', '#2D7FC3']
let flag = 0
function init() {
    myECharts = echarts.init(chart6.value)
    axios.get("/api/stock.json").then(({ data }) => {
        totalData = data
        console.log(totalData);
        updateChart()
    })
}

function updateChart() {
    (option.series as any) = [];
    for (let i = flag; i < flag + 5; i++) {
        (option.series as any).push({
            type: 'pie',
            radius: ['30%', '35%'],
            avoidLabelOverlap: true,
            label: {
                show: true,
                position: 'center',
                fontSize: 8,
                color: '#fff',
                formatter: '{b}\n\n{c}'
            },
            emphasis: false,
            data: [
                {
                    value: totalData[i].sales,
                    name: totalData[i].name,
                    itemStyle: {
                        color: i >= 5 ? colorData[i - 5] : colorData[i]
                    }
                },
                {
                    value: totalData[i].stock,
                    name: totalData[i].name,
                    itemStyle: {
                        color: '#333843'
                    }
                },
            ],
            center: [i % 5 <= 2 ? (i % 5 + 1) * 100 : i % 5 == 3 ? 150 : 265, i % 5 <= 2 ? 60 : 140],

        })
    }
    myECharts?.setOption(option)
    flag = (flag == 0) ? 5 : 0
}

setInterval(() => {
    updateChart()
}, 2000)

onMounted(() => {
    init()
    window.addEventListener('resize', () => { myECharts?.resize() });
})
</script>

<style scoped></style>